<template>
  <a-form ref="elForm" :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }">
    <a-form-item label="标题" required>
      <el-input
        v-model="formData.title"
        placeholder="标题"
        :style="{ width: '100%' }"
      ></el-input>
    </a-form-item>
    <a-form-item label="类别" required>
      <el-select v-model="formData.type_code" placeholder="请选择类别">
        <el-option
          v-for="item in typeList"
          :key="item.dictionary_code"
          :label="item.dictionary_name"
          :value="item.dictionary_code"
        >
        </el-option>
      </el-select>
    </a-form-item>
    <a-form-item label="封面图:" required>
      <upManyImgComp
        :fileListArr="avatar"
        :disabled="isreadonly"
        @gainList="uploadpicturePath"
        :limit="1"
      ></upManyImgComp>
      <div class="el-upload__tip">
        提示：请上传jpg/jpeg/png格式的文件，且不超过5M
      </div>
    </a-form-item>
    <a-form-item label="详细信息:" required>
      <WangEditor
        ref="editordetails"
        :value="formData.content"
        editorId="editordetails"
      ></WangEditor>
    </a-form-item>
    <a-form-item size="large">
      <el-button type="primary" @click="submitForm" v-if="isreadonly !== true"
        >提交</el-button
      >
      <el-button @click="close">关闭</el-button>
    </a-form-item>
  </a-form>
</template>
<script>
import { apiComm } from '@/api/index'
import upManyImgComp from '@/components/upManyImgComp'
import WangEditor from '@/components/Editor/index.vue'
export default {
  components: { upManyImgComp, WangEditor },
  props: ['fid', 'isreadonly', 'catalogcode', 'dictionarycode'],
  data() {
    return {
      formData: {
        fid: undefined,
        avatar: '',
        type_code: undefined,
        catalog_code: this.catalogcode,
        content: undefined,
        title: undefined
      },
      typeList: [],
      avatar: [],
      imgUrl: { url: '' }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.loadTypeData()
    this.avatar = []
    if (this.fid !== undefined && this.fid !== null) {
      apiComm('dictionary.getNewContent', { fid: this.fid }).then(res => {
        if (res.code === 0) {
          this.formData.fid = res.data.fid
          this.formData.avatar = res.data.avatar
          this.formData.title = res.data.title
          this.formData.type_code = res.data.type_code
          this.formData.catalog_code = res.data.catalog_code
          this.formData.content = res.data.content
          this.avatar.push({
            uid: res.data.fid,
            name: 'image.png',
            status: 'done',
            url: res.data.avatar
          })
        }
      })
    } else {
      this.formData = {
        fid: undefined,
        avatar: [],
        type_code: undefined,
        catalog_code: this.catalogcode,
        content: undefined,
        title: undefined
      }
    }
  },
  methods: {
    submitForm() {
      if (this.$refs.editordetails !== undefined) {
        this.formData.content = this.$refs.editordetails.editor.txt.html()
      }
      if (this.formData.title === '' || this.formData.title === undefined) {
        this.$message.success('请输入标题')
        return
      }
      if (this.avatar.length === 0) {
        this.$message.success('请上传封面图')
        return
      }
      this.formData.avatar = this.avatar[0].url
      if (
        this.formData.type_code === '' ||
        this.formData.type_code === undefined
      ) {
        this.$message.success('请选择类别')
        return
      }
      if (this.formData.content === '' || this.formData.content === undefined) {
        this.$message.success('内容不能为空！')
        return
      }
      if (this.formData.fid === undefined) {
        this.formData.catalog_code = this.catalogcode
        apiComm('dictionary.addNewContent', this.formData).then(res => {
          if (res.code === 0) {
            this.$emit('savedata', this.formData)
            this.$message.success('保存成功！')
          }
        })
      } else {
        apiComm('dictionary.editNewContent', this.formData).then(res => {
          if (res.code === 0) {
            this.$emit('savedata', this.formData)
            this.$message.success('保存成功！')
          }
        })
      }
    },
    close() {
      this.$emit('close')
    },
    uploadpicturePath(filelist) {
      this.avatar = filelist
    },
    loadTypeData() {
      apiComm('dictionary.getdictionaryList', {
        typecode: this.dictionarycode
      }).then(res => {
        this.typeList = res.data
      })
    }
  }
}
</script>
